<template>
  <el-dialog
    v-model="priceDialogVisible"
    style="
      width: 315px;
      height: auto;
      padding: 0;
      background: #222222;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.5);
    "
    align-center
    :show-close="false"
  >
    <!-- 头部 -->
    <template #header>
      <div class="custom-header">
        <span class="dialog-title">修改歌曲定价</span>
        <i class="el-icon-close dialog-title" @click="priceDialogVisible = false">
          <el-icon><Close /></el-icon>
        </i>
      </div>
    </template>

    <!-- 内容区域 -->
    <div class="dialog-content">
      <div class="inline">
        <span class="input-title">价格</span>
        <el-input
          v-model="localPrice"
          placeholder="请输入价格"
          style="width: 169px; background: #f2f3f5; border-radius: 2px"
        ></el-input>
        <img src="@/assets/dashboard/crystal.png" class="icon" />
      </div>
      <span class="price-tip">价格区间：100-1000红欲米</span>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button class="cancel-btn" @click="priceDialogVisible = false">取消</el-button>
        <el-button class="confirm-btn" type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "SongPricing",
};
</script>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  // 歌曲原本定价
  price: {
    type: Number,
    default: "",
  },
});

const emit = defineEmits(["submit"]);

const priceDialogVisible = ref(false); // 弹窗显示/隐藏
// 显示
const show = () => {
  priceDialogVisible.value = true;
};

const localPrice = ref(props.price); // 歌曲定价

const handleConfirm = () => {
  emit("submit", localPrice.value);
  priceDialogVisible.value = false;
};
defineExpose({ show });
</script>
<style lang="scss" scoped>
.custom-header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px 5px 20px;
  border-bottom: 1px solid rgba(216, 216, 216, 0.5);

  .dialog-title {
    font-size: 16px;
    color: #ffffff;
  }
}
.dialog-content {
  // padding: 30px 60px 30px 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  .inline {
    align-items: center;
    .icon {
      margin-left: 7px;
      width: 17px;
      vertical-align: middle;
    }
    .input-title {
      color: #ffffff;
      margin-right: 10px;
    }
  }
  .price-tip {
    margin-top: 5px;
    padding: 0 35px;
    font-size: 12px;
    color: #ffffff;
    // background-color: olivedrab;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid rgba(216, 216, 216, 0.5);

  .cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: #8a8a8a;
    font-size: 12px;
    padding: 7px 15px;
  }
  .confirm-btn {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: #ff4e6c;
    font-size: 12px;
    padding: 7px 15px;
  }
}
</style>
